<template>
  <div
    class="c-h c-minh c-text-hidden"
    id="courseCategory"
  >
    <course-one
      ref="courseOne"
      v-if="categoryLevel == 1"
      :categoryTheme="categoryTheme"
      :leftList="leftList"
      :rightList="rightList"
      :initCatId="initCatId"
      :currentIndex="currentIndex"
      :categoryConfs="categoryConfs"
      @swichMenuOne="swichMenuOne"
      @handleClickDetail="handleClickDetail"
      @handleClickItem="handleClickItem"
    ></course-one>
    <course-two
      ref="courseTwo"
      v-if="categoryLevel == 2"
      :categoryTheme="categoryTheme"
      :leftList="leftList"
      :name="name"
      :rightList="rightList"
      :initCatId="initCatId"
      :initCatIdTwo="initCatIdTwo"
      :tabCurrentIndex="tabCurrentIndex"
      :currentIndex="currentIndex"
      :avatar="avatar"
      :categoryConfs="categoryConfs"
      @swichMenuTwo="swichMenuTwo"
      @handleClickDetail="handleClickDetail"
      @handleClickItem="handleClickItem"
      @handleClickLeftCt5="handleClickLeftCt5"
    ></course-two>
    <course-three
      ref="courseThree"
      v-if="categoryLevel == 3"
      :categoryTheme="categoryTheme"
      :leftList="leftList"
      :rightList="rightList"
      :rightListThree="rightListThree"
      :initCatId="initCatId"
      :initCatIdTwo="initCatIdTwo"
      :currentIndex="currentIndex"
      :rightThreeCatId="rightThreeCatId"
      :rightThreeName="rightThreeName"
      :tabCurrentIndex="tabCurrentIndex"
      :avatar="avatar"
      :name="name"
      :threeIndex="threeIndex"
      :categoryConfs="categoryConfs"
      @swichMenuThree="swichMenuThree"
      @handleClickDetail="handleClickDetail"
      @handleClickItem="handleClickItem"
      @handleClickTablist="handleClickTablist"
      @handleClickLeftL3C5="handleClickLeftL3C5"
      @handleClickThreeLevel="handleClickThreeLevel"
    ></course-three>
    <course-ten
      ref="courseTen"
      v-if="categoryLevel == 10"
      :leftList="leftList"
      :rightList="rightList"
      :initCatId="initCatId"
      :currentIndex="currentIndex"
      :categoryConfs="categoryConfs"
      @swichMenuOne="swichMenuOne"
      @handleClickDetail="handleClickDetail"
      @handleClickItem="handleClickItem"
    ></course-ten>
    <template v-if="companyAuth && companyAuth.companyNav">
      <nav-bottom-bar :itemIndex="44" v-for="(item,index) in companyAuth.companyNav" :key="index" v-if="item.navType == 44"></nav-bottom-bar>
    </template>
  </div>
</template>

<script>
import NavBottomBar from "@/components/templates/common/navBottomBar.vue";
import courseOne from "@/components/templates/courseIndex/courseOne.vue";
import courseTwo from "@/components/templates/courseIndex/courseTwo.vue";
import courseThree from "@/components/templates/courseIndex/courseThree.vue";
import courseTen from "@/components/templates/courseIndex/courseTen.vue";
import { utilJs } from "@/utils/common.js";
import { goDetails } from "@/utils/goDetails.js"
export default {
  name: "CourseCategory",
  components: {
    courseOne,
    courseTwo,
    courseThree,
    courseTen,
    NavBottomBar
  },
  data() {
    return {
      catL1Id: "",
      catL2Id: "",
      categoryLevel: JSON.parse(localStorage.getItem("categoryLevel")),
      categoryTheme: JSON.parse(localStorage.getItem("categoryTheme")),
      leftList: [],
      rightList: [],
      initCatId: '', //初始化catId
      initCatIdTwo: '',
      currentIndex: 0,
      name: '',
      rightListThree: [],
      rightThreeCatId: '',
      rightThreeName: '',
      tabCurrentIndex: 0,
      avatar: '',
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      threeIndex: 0,
      categoryConfs: ''
    }
  },
  created() {
    utilJs.appShare(this);
  },
  activated() {
    setDocumentTitle("商品分组");// eslint-disable-line
    document.getElementById('courseCategory').style.minHeight = '';
    this.catL1Id = this.$route.query.catL1Id || 0;
    this.catL2Id = this.$route.query.catL2Id || 0;
    this.catL3Id = this.$route.query.catL3Id || 0;
    this.name = this.$route.query.name || "";
    this.categoryLevel = JSON.parse(localStorage.getItem("categoryLevel"));
    this.categoryTheme = JSON.parse(localStorage.getItem("categoryTheme"));
    // this.categoryLevel = 2;
    // this.categoryTheme = 4;
    this.leftList = [];
    this.rightList = [];
    this.rightListThree = [];
    this.rightThreeCatId = '';
    this.rightThreeName = '';
    this.initCatId = '';
    this.initCatIdTwo = '';
    this.currentIndex = 0;
    this.threeIndex = 0;
    this.avatar = '';
    this.getCateConfs();
    if (this.categoryLevel == 3) {
      // 模板3
      this.initData(1, 0, 0, 1, 1, 0).then(res => {
        this.leftList = res;
        // 若从首页进入点击某个分类
        this.initCatId = this.catL1Id && this.catL1Id != 0 ? this.catL1Id : res[0].catId;
        res.forEach((element, index) => {
          if (this.initCatId == element.catId) {
            this.currentIndex = index;
            this.name = element.name;
            this.avatar = element.avatar;
          }
        });
        this.$nextTick(() => {
          if (this.categoryTheme == 5) {
            this.$refs.courseThree.topScrollLevel1(this.currentIndex);
          } else {
            this.$refs.courseThree.scrollLeftView(this.currentIndex);
          }
        })
        if (this.categoryTheme == 3) {
          this.initData(3, this.catL2Id, this.initCatId, 2, 1, 3).then(res => {
            this.rightList = res;
            if (res.length > 0) {
              this.initCatIdTwo = this.catL2Id && this.catL2Id != 0 ? this.catL2Id : res[0].catId;
              res.forEach((element, index) => {
                if (element.catId == this.initCatIdTwo) {
                  this.tabCurrentIndex = index;
                }
              })
              this.initThreeData(this.initCatId, this.initCatIdTwo, 3).then(res => {
                if (res.length > 0) {
                  this.rightListThree = res;
                  this.rightThreeCatId = res[0].catId;
                  this.rightThreeName = res[0].name;
                } else {
                  this.rightListThree = [];
                  this.rightThreeCatId = '';
                  this.rightThreeName = '';
                }
              })
              this.$refs.courseThree.handleScroll(this.tabCurrentIndex);
            }
          })
        } else {
          this.initData(3, 0, this.initCatId, 1, 1, 0).then(res => {
            this.rightList = res;
            if (res.length > 0 && this.categoryTheme == 5) {
              this.initCatIdTwo = this.catL2Id && this.catL2Id != 0 ? this.catL2Id : res[0].catId;
              res.forEach((element, index) => {
                if (element.catId == this.initCatIdTwo) {
                  this.tabCurrentIndex = index;
                  this.name = this.rightList[this.tabCurrentIndex].name;
                }
              })
              this.$nextTick(() => {
                this.$refs.courseThree.scrollLeftView(this.tabCurrentIndex);
              })
              this.getChildCategory(this.initCatIdTwo).then(res => {
                if (res && res.length > 0) {
                  this.rightListThree = res
                  this.threeIndex = 0;
                  this.rightThreeCatId = this.rightListThree[0].catId;
                  this.rightThreeName = this.rightListThree[0].name;
                  this.$nextTick(() => {
                    this.$refs.courseThree.initData();
                  })
                } else {
                  this.rightListThree = [];
                  this.threeIndex = 0;
                  this.rightThreeCatId = 0;
                  this.rightThreeName = '';
                  this.$refs.courseThree.showNoData();
                }
              })
            }
          })
        }
      })
    } else if (this.categoryLevel == 2) {
      // 模板2
      this.initData(1, 0, 0, 1, 1, 0).then(res => {
        this.leftList = res;
        // 若从首页进入点击某个分类
        this.initCatId = this.catL1Id && this.catL1Id != 0 ? this.catL1Id : res[0].catId;
        res.forEach((element, index) => {
          if (this.initCatId == element.catId) {
            this.currentIndex = index;
            this.name = element.name;
            this.avatar = element.avatar;
          }
        });
        this.$nextTick(() => {
          if (this.categoryTheme == 5) {
            this.$refs.courseTwo.topScrollLevel1(this.currentIndex);
          } else {
            this.$refs.courseTwo.scrollLeftView(this.currentIndex);
          }
        })
        if (this.categoryTheme == 3) {
          this.initData(2, 0, this.initCatId, 2, 1, 3).then(res => {
            this.rightList = res;
          })
        } else {
          this.initData(2, 0, this.initCatId, 1, 1, 0).then(res => {
            this.rightList = res;
            //新增的二级模板5
            if (res.length > 0 && this.categoryTheme == 5) {
              this.initCatIdTwo = this.catL2Id && this.catL2Id != 0 ? this.catL2Id : res[0].catId;
              res.forEach((element, index) => {
                if (element.catId == this.initCatIdTwo) {
                  this.tabCurrentIndex = index;
                }
              })
              this.$nextTick(() => {
                this.$refs.courseTwo.initData();
                this.$refs.courseTwo.scrollLeftView(this.currentIndex);
              })
              // this.$refs.courseThree.handleScroll(this.tabCurrentIndex);
            } else if (this.categoryTheme == 5) {
              this.initCatIdTwo = 0;
              this.tabCurrentIndex = 0;
              this.$refs.courseTwo.showNoData();
            }
          })
        }
      })
    } else if (this.categoryLevel == 1) {
      // 模板1
      this.initData(1, 0, 0, 1, 1, 0).then(res => {
        this.leftList = res;
        // 若从首页进入点击某个分类
        this.initCatId = this.catL1Id && this.catL1Id != 0 ? this.catL1Id : res[0].catId;
        res.forEach((element, index) => {
          if (this.initCatId == element.catId) {
            this.currentIndex = index;
            this.name = element.name;
          }
        });
        this.initRoute(this.initCatId, 0, 0, this.name);
        if (this.categoryTheme == 3) {
          this.$refs.courseOne.initList(1, this.initCatId, 2, 1, 10, '');
          this.$nextTick(() => {
            this.$refs.courseOne.scrollLeftView(this.currentIndex);
          })
        } else if (this.categoryTheme == 4) {
          this.$nextTick(() => {
            this.$refs.courseOne.getMoreC();
            this.$refs.courseOne.scrollLeftView(this.currentIndex);
          })
        } else {
          this.$refs.courseOne.contentTo();
        }
      })
    } else if (this.categoryLevel == 10) {
      // 模板1
      this.initData(1, 0, 0, 1, 1, 0).then(res => {
        this.leftList = res;
        // 若从首页进入点击某个分类
        this.initCatId = this.catL1Id && this.catL1Id != 0 ? this.catL1Id : res[0].catId;
        res.forEach((element, index) => {
          if (this.initCatId == element.catId) {
            this.currentIndex = index;
            this.name = element.name;
          }
        });
        this.initRoute(this.initCatId, 0, this.name);
        this.$nextTick(() => {
          this.$refs.courseTen.getMoreC();
          this.$refs.courseTen.scrollLeftView(this.currentIndex);
        })
      })
    }
    this.wechatShare();
  },
  methods: {
    // 模板1
    swichMenuOne(index, catId) {
      // this.$refs.courseOne.initList(1, catId, 2, 1, 10, '');
      this.initCatId = this.leftList[index].catId;
      this.currentIndex = index;
      this.initRoute(catId)
    },
    handleClickLeftCt5(index, cateId1, cateId2, name) {
      this.tabCurrentIndex = index;
      this.initCatIdTwo = cateId2;
      this.initRoute(cateId1, cateId2, name)
    },
    getCateConfs() {
      utilJs.getMethod(global.apiurl + "courses/v2/categoryConfs", res => {
        this.categoryConfs = res;
      })
    },
    handleClickLeftL3C5(index, cateId1, cateId2, name) {
      this.tabCurrentIndex = index;
      this.initCatIdTwo = cateId2;
      this.getChildCategory(this.initCatIdTwo).then(res => {
        this.name = this.rightList[index].name;
        if (res && res.length > 0) {
          this.rightListThree = res;
          this.threeIndex = 0;
          this.rightThreeCatId = this.rightListThree[0].catId;
          this.rightThreeName = this.rightListThree[0].name;
          this.$nextTick(() => {
            this.$refs.courseThree.initData();
          })
        } else {
          this.rightListThree = [];
          this.threeIndex = 0;
          this.rightThreeCatId = 0;
          this.rightThreeName = '';
          this.$refs.courseThree.showNoData();
        }
      })
      this.initRoute(cateId1, cateId2, name)
    },
    handleClickThreeLevel(index, cateId3, name) {
      this.threeIndex = index;
      this.rightThreeCatId = cateId3;
    },
    getChildCategory(parentId) {
      return new Promise((resolve, reject) => {
        utilJs.getMethod(global.apiurl + `courses/getChildCategory?parentId=${parentId}`, res => {
          resolve(res)
        }, failRes => {
          reject(failRes)
        })
      })
    },
    handleClickDetail(cateId1, cateId2, cateId3, name) {
      this.initRoute(cateId1, cateId2, cateId3, name);
      let toPath = `/homePage/course/catDetailList?cateId1=${cateId1}&cateId2=${cateId2}&cateId3=${cateId3}&name=${name}`;
      this.iosAppRouteChange(toPath);
    },
    handleClickItem(item) {
      let courseType = item.prodType == 110 ? 0 : item.prodType == 111 ? 1 : item.prodType == 112 ? 2 : '';
      let prodType = item.prodType == 110 || item.prodType == 111 || item.prodType == 112 ? global.ckFrom.course : item.prodType;
      goDetails(this, prodType, item.prodId, '', courseType)
    },
    // 模板2
    swichMenuTwo(index, catId, categoryTheme, name) {
      this.initCatId = this.leftList[index].catId;
      this.avatar = this.leftList[index].avatar;
      this.currentIndex = index;
      if (categoryTheme != 5) {
        this.initRoute(catId, 0, name)
      }
      if (categoryTheme == 3) {
        this.initData(2, 0, catId, 2, 1, 3).then(res => {
          this.rightList = res;
        })
      } else {
        this.initData(2, 0, catId, 1, 1, 0).then(res => {
          this.name = this.leftList[index].name;
          this.rightList = res;
          this.tabCurrentIndex = 0;
          if (categoryTheme == 5) {
            this.initRoute(catId, 0, name)
          }
          if (res.length > 0 && this.categoryTheme == 5) {
            this.initCatIdTwo = res[0].catId;
            // this.$refs.courseThree.handleScroll(this.tabCurrentIndex);
            this.$nextTick(() => {
              this.$refs.courseTwo.initData();
            })
          } else if (this.categoryTheme == 5) {
            this.initCatIdTwo = 0;
            this.$refs.courseTwo.showNoData();
          }
        });
      }
    },
    // 模板3
    swichMenuThree(index, catId, categoryTheme, name) {
      this.initCatId = this.leftList[index].catId;
      this.avatar = this.leftList[index].avatar;
      this.currentIndex = index;
      if (categoryTheme == 3) {
        this.initData(3, 0, catId, 2, 1, 3).then(res => {
          this.tabCurrentIndex = 0;
          this.rightList = res;
          if (res.length > 0) {
            this.initCatIdTwo = res[0].catId;
            this.initThreeData(this.initCatId, res[0].catId, 3).then(res => {
              if (res.length > 0) {
                this.rightListThree = res;
                this.rightThreeCatId = res[0].catId;
                this.rightThreeName = res[0].name;
              } else {
                this.rightListThree = [];
                this.rightThreeCatId = '';
                this.rightThreeName = '';
              }
            })
            this.initRoute(catId, res[0].catId, name)
            this.$refs.courseThree.handleScroll(this.tabCurrentIndex);
          } else {
            this.rightListThree = [];
            this.initRoute(catId, 0, name)
          }
        })
      } else {
        this.initData(3, 0, catId, 1, 1, 0).then(res => {
          this.name = this.leftList[index].name;
          this.rightList = res;
          this.tabCurrentIndex = 0;
          if (res.length > 0 && this.categoryTheme == 5) {
            this.initCatIdTwo = res[0].catId;
            this.getChildCategory(this.initCatIdTwo).then(res => {
              if (res && res.length > 0) {
                this.rightListThree = res;
                this.threeIndex = 0;
                this.rightThreeCatId = this.rightListThree[0].catId;
                this.rightThreeName = this.rightListThree[0].name;
                this.$nextTick(() => {
                  this.$refs.courseThree.initData();
                })
              } else {
                this.rightListThree = [];
                this.threeIndex = 0;
                this.rightThreeCatId = 0;
                this.rightThreeName = '';
                this.$refs.courseThree.showNoData();
              }
              this.initRoute(catId, 0, name)
            })
            // this.$refs.courseThree.handleScroll(this.tabCurrentIndex);
          } else if (this.categoryTheme == 5) {
            this.initCatIdTwo = 0;
            this.rightListThree = [];
            this.threeIndex = 0;
            this.rightThreeCatId = 0;
            this.rightThreeName = '';
            this.$refs.courseThree.showNoData();
            this.initRoute(catId, 0, name)
          }
        })
        if (categoryTheme != 5) {
          this.initRoute(catId, 0, name)
        }
      }
    },
    handleClickTablist(item, index) {
      this.initRoute(this.initCatId, item.catId, item.name);
      this.tabCurrentIndex = index;
      this.initCatIdTwo = item.catId;
      this.initThreeData(this.initCatId, item.catId, 3).then(res => {
        this.rightListThree = res;
      })
    },
    initData(level, catL2Id, parentId, showType, page, limit) {
      return new Promise((resolve, reject) => {
        utilJs.getMethod(global.apiurl + `courses/v2/categoryShow?level=${level}&catL2Id=${catL2Id}&parentId=${parentId}&showType=${showType}&page=${page}&limit=${limit}&isSkeleton=1`, res => {
          resolve(res)
        }, failRes => {
          reject(failRes)
        })
      })
    },
    initThreeData(level1CatId, level2CatId, limit) {
      return new Promise((resolve, reject) => {
        utilJs.getMethod(global.apiurl + `courses/v2/getCategoryWithProd?level1CatId=${level1CatId}&level2CatId=${level2CatId}&limit=${limit}&isSkeleton=1`, res => {
          resolve(res);
        }, failRes => {
          reject(failRes);
        })
      })
    },
    initRoute(cateId1, cateId2, name) {
      this.$routerGo(this, "replace", {
        path: "/homePage/course/courseCategory",
        query: {
          catL1Id: cateId1,
          catL2Id: cateId2,
          name: name
        }
      });
      this.$store.commit('updateLoadingStatus', {
        isLoading: false
      });
      this.wechatShare();
    },
    iosAppRouteChange(toPath) {
      if (utilJs.isIOSApp()) {
        window.webkit.messageHandlers.iosWechatRoute.postMessage(toPath);
      } else if (utilJs.isAndoridNewApp()) {
        let data = {
          path: toPath
        }
        window.androidWechatRoute.doAction(JSON.stringify(data))
      } else {
        this.$routerGo(this, "push", { path: toPath });
      }
    },
    //分享
    wechatShare: function () {
      let title = '分组列表';
      let shareUrl =
        window.location.href.split("#")[0] +
        "#/homePage/course/courseCategory?refereeId=" +
        localStorage.getItem("userId");
      utilJs.wechatConfig(shareUrl, title, "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      var shareUrl =
        window.location.href.split("#")[0] +
        "#/homePage/course/courseCategory?refereeId=" +
        localStorage.getItem("userId");
      utilJs.appShareTrue("", "", shareUrl, "");
    }
  }
}
</script>

<style lang="less" scoped>
</style>